(function () {
  $(".monitor a").click(function () {
    $(this).addClass("active").siblings("a").removeClass("active");
    $(".monitor .content")
      .eq($(this).index())
      .show()
      .siblings(".content")
      .hide();
  });
  $(".marquee-view .marquee").each(function (i, dom) {
    var rows = $(dom).children().clone();
    $(dom).append(rows);
  });
})();
// 点位模块
(function () {
  // 1. 用过echarts.init()方法
  var myChart = echarts.init(document.querySelector(".pie"));
  // 2. 指定配置项
  var option = {
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff",
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },

    series: [
      {
        name: "点位统计",
        type: "pie",
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        data: [
          { value: 20, name: "云南" },
          { value: 26, name: "北京" },
          { value: 24, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 25, name: "浙江" },
          { value: 30, name: "四川" },
          { value: 42, name: "湖北" },
        ],
        //  文字样式修饰
        label: {
          fontSize: 10,
        },
        //  引导线调整
        labelLine: {
          // 连接扇形图线长
          length: 6,
          // 连接文字线长
          length2: 8,
        },
      },
    ],
  };
  // 3. 调用指定的配置项
  myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 柱形图模块
(function () {
  // 1 实例化对象
  var myChart = echarts.init(document.querySelector(".bar"));
  // 2 指定相关配置
  var option = {
    // 修改线性渐变色方式 1
    color: new echarts.graphic.LinearGradient(
      // (x1,y2) 点到点 (x2,y2) 之间进行渐变
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: "#00fffb" }, // 0 起始颜色
        { offset: 1, color: "#0061ce" }, // 1 结束颜色
      ]
    ),
    // 提示框组件
    tooltip: {
      trigger: "item",
    },
    grid: {
      top: "3%",
      left: "0%",
      right: "3%",
      bottom: "3%",
      containLabel: true, // 刻度
      // 显示网格线
      show: true,
      // grid 四条边框颜色
      borderColor: "rgba(0, 240, 255, 0.3)",
    },
    xAxis: [
      {
        type: "category",
        data: [
          "上海",
          "广州",
          "北京",
          "深圳",
          "合肥",
          "",
          "......",
          "",
          "杭州",
          "厦门",
          "济南",
          "成都",
          "重庆",
        ],
        axisTick: {
          alignWithLabel: false, // 指的是刻度  false  在两个柱子中间显示 true就是在柱子下面显示
          show: false, // 隐藏X轴的刻度
        },
        // x坐标轴文字标签样式设置
        axisLabel: {
          color: "#4c9bfd",
        },
        // x坐标轴颜色设置
        axisLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)",
            // width:8,  x轴线的粗细
            // opcity: 0,   如果不想显示x轴线 则改为 0
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        // 刻度设置
        axisTick: {
          // 不显示刻度
          show: false,
        },
        // y坐标轴文字标签样式设置
        axisLabel: {
          color: "#4c9bfd",
        },
        // y坐标轴颜色设置
        axisLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)",
            // width:8,  x轴线的粗细
            // opcity: 0,   如果不想显示x轴线 则改为 0
          },
        },
        // y轴 分割线的样式
        splitLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)",
          },
        },
      },
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [
          2100,
          1900,
          1700,
          1560,
          1400,
          {
            value: 1200,
            // 柱子颜色
            itemStyle: {
              color: "#254065",
            },
            // 鼠标经过柱子颜色
            emphasis: {
              itemStyle: {
                color: "#254065",
              },
            },
            // 工具提示隐藏
            // 工具提示隐藏
            tooltip: {
              extraCssText: "opacity:0",
            },
          },
          {
            value: 1200,
            // 柱子颜色
            itemStyle: {
              color: "#254065",
            },
            // 鼠标经过柱子颜色
            emphasis: {
              itemStyle: {
                color: "#254065",
              },
            },
            // 工具提示隐藏
            // 工具提示隐藏
            tooltip: {
              extraCssText: "opacity:0",
            },
          },
          {
            value: 1200,
            // 柱子颜色
            itemStyle: {
              color: "#254065",
            },
            // 鼠标经过柱子颜色
            emphasis: {
              itemStyle: {
                color: "#254065",
              },
            },
            // 工具提示隐藏
            // 工具提示隐藏
            tooltip: {
              extraCssText: "opacity:0",
            },
          },
          900,
          750,
          600,
          480,
          240,
        ],
      },
    ],
  };
  // 3 把配置给实例对象
  myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 订单模块
(function () {
  // tab切换 准备数据
  var data = {
    day365: { orders: "20,301,987", amount: "99834" },
    day90: { orders: "301,987", amount: "9834" },
    day30: { orders: "1,987", amount: "3834" },
    day1: { orders: "987", amount: "834" },
  };
  $(".order .filter").on("click", "a", function () {
    // 获取当前的索引号  让index与索引号相同
    index = $(this).index();
    $(this).addClass("active").siblings("a").removeClass("active");
    // 获取自定义属性的值
    var day = $(this).attr("data-time");
    // 获取第一个h4 和 第二个h4
    var orderHtml1 = $(".order h4:eq(0)");
    var orderHtml2 = $(".order h4:eq(1)");
    orderHtml1.html(data[day].orders);
    orderHtml2.html(data[day].amount);
  });
  // 定时器 自动tab切换
  var index = 0;
  var timer = setInterval(function () {
    index++;
    if (index >= 4) index = 0;
    $(".order .filter a").eq(index).click();
  }, 2000);
  // 鼠标经过\离开
  $(".data").hover(
    // 鼠标经过清除定时器
    function () {
      clearInterval(timer);
    },
    // 鼠标离开启动定时器 启动前清除一次定时器
    function () {
      clearInterval(timer);
      timer = setInterval(function () {
        index++;
        if (index >= 4) index = 0;
        $(".order .filter a").eq(index).click();
      }, 3000);
    }
  );
})();

// 销售模块
(function () {
  // tab切换 准备数据
  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
    ],
  };
  // 1. 用过echarts.init()方法
  var myChart = echarts.init(document.querySelector(".line"));
  // 2. 指定配置项
  var option = {
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      // 通过坐标轴触发
      trigger: "axis",
    },
    legend: {
      right: "10%", // 定位的方式位置
      // 修饰图例文字的颜色
      textStyle: {
        color: "#4c9bfd",
      },
      // data: ["预期销售额", "实际销售额"], // series 的name设置了 legend的data可以省略
    },
    // grid 网格样式
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      // 去除刻度
      axisTick: {
        show: false,
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "#4c9bfd",
      },
      // 去除x坐标轴的颜色
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      // 去除刻度
      axisTick: {
        show: false,
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "#4c9bfd",
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a", // 分割线颜色
        },
      },
    },
    series: [
      {
        name: "预期销售额",
        type: "line",
        stack: "总量",
        smooth: true, // 圆滑线
        data: data.year[0],
      },
      {
        name: "实际销售额",
        type: "line",
        stack: "总量",
        smooth: true, // 圆滑线
        data: data.year[1],
      },
    ],
  };
  // 3. 调用指定的配置项
  myChart.setOption(option);
  // tab切换 点击事件(事件委托)
  $(".sales .caption").on("click", "a", function () {
    // 获取当前的索引号 结构内不止a一个标签 让index与索引号相同
    index = $(this).index() - 1;
    $(this).addClass("active").siblings("a").removeClass("active"); //a的点击
    // 拿到当前点击的这个a的自定义属性的值
    var type = $(this).attr("data-type");
    // 拿到option对象里面的数据 data对象里面type这个属性里面的第0 1个值赋值给option.series[0].data
    option.series[0].data = data[type][0];
    option.series[1].data = data[type][1];
    myChart.setOption(option);
  });

  // 定时器  tab自动切换
  var $a = $(".sales .caption a");
  var index = 0;
  var timer = setInterval(function () {
    $a.eq(index).click();
    index++;
    if (index >= 4) index = 0;
  }, 2000);
  $(".line").hover(
    // 这里是鼠标经过
    function () {
      clearInterval(timer);
    },
    function () {
      // 这里是鼠标离开 先清除一次定时器
      clearInterval(timer);
      timer = setInterval(function () {
        $a.eq(index).click();
        index++;
        if (index >= 4) index = 0;
      }, 2000);
    }
  );
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 销售渠道模块 雷达图
(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".radar"));
  // 2.指定配置

  var option = {
    tooltip: {
      show: true,
      // 控制提示框组件的显示位置
      position: ["60%", "10%"],
    },
    radar: {
      indicator: [
        { name: "机场", max: 100 },
        { name: "商场", max: 100 },
        { name: "火车站", max: 100 },
        { name: "汽车站", max: 100 },
        { name: "地铁", max: 100 },
      ],
      radius: "65%",
      shape: "circle",
      splitNumber: 4,
      name: {
        // 修饰雷达图文字的颜色
        textStyle: {
          color: "#4c9bfd",
        },
      },
      // 分割圆圈线条的样式
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.5)",
        },
      },
      splitArea: {
        show: false,
      },
      // 坐标轴的线修改为白色半透明
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.5)",
        },
      },
    },
    series: [
      {
        name: "北京",
        type: "radar",
        lineStyle: {
          normal: {
            color: "#fff",
            width: 1,
            opacity: 0.5,
          },
        },
        data: [[90, 19, 56, 11, 34]],
        symbol: "circle",
        // 设置小圆点大小
        symbolSize: 5,
        // 小圆点颜色
        itemStyle: {
          color: "#fff",
        },
        // 在圆点上显示相关数据
        label: {
          show: true,
          color: "#fff",
          fontSize: 10,
        },
        // 修饰区域填充的背景颜色
        areaStyle: {
          color: "rgba(238, 197, 102, 0.6)",
        },
      },
    ],
  };
  // 3.把配置和数据给对象
  myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 销售模块 饼形图 半圆形
(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".gauge"));
  // 2. 指定数据和配置
  var option = {
    series: [
      {
        name: "销售进度",
        type: "pie",
        // 放大图形
        radius: ["130%", "150%"],
        // 移动下位置  套住50%文字
        center: ["48%", "80%"],
        //是否启用防止标签重叠策略
        // avoidLabelOverlap: false,
        // 起始角度，支持范围[0, 360]
        startAngle: 180,
        // 鼠标经过不需要放大偏移图形
        hoverOffset: 0,
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 100,
            itemStyle: {
              // 颜色渐变#00c9e0->#005fc1
              color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                  { offset: 1, color: "#005fc1" }, // 1 结束颜色
                ]
              ),
            },
          },
          { value: 100, itemStyle: { color: "#12274d" } }, // 颜色#12274d
          { value: 200, itemStyle: { color: "transparent" } }, // 透明隐藏第三块区域
        ],
      },
    ],
  };
  // 3. 把数据和配置给实例对象
  myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 全国热榜模块
(function () {
  // 准备数据
  var hotData = [
    {
      city: "北京", // 城市
      sales: "25, 179", // 销售额
      flag: true, //  上升还是下降
      brands: [
        //  品牌种类数据
        { name: "可爱多", num: "9,086", flag: true },
        { name: "娃哈哈", num: "8,341", flag: true },
        { name: "喜之郎", num: "7,407", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "6,724", flag: false },
        { name: "好多鱼", num: "2,170", flag: true },
      ],
    },
    {
      city: "河北",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "3,457", flag: false },
        { name: "娃哈哈", num: "2,124", flag: true },
        { name: "喜之郎", num: "8,907", flag: false },
        { name: "八喜", num: "6,080", flag: true },
        { name: "小洋人", num: "1,724", flag: false },
        { name: "好多鱼", num: "1,170", flag: false },
      ],
    },
    {
      city: "上海",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "2,345", flag: true },
        { name: "娃哈哈", num: "7,109", flag: true },
        { name: "喜之郎", num: "3,701", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "2,724", flag: false },
        { name: "好多鱼", num: "2,998", flag: true },
      ],
    },
    {
      city: "江苏",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "2,156", flag: false },
        { name: "娃哈哈", num: "2,456", flag: true },
        { name: "喜之郎", num: "9,737", flag: true },
        { name: "八喜", num: "2,080", flag: true },
        { name: "小洋人", num: "8,724", flag: true },
        { name: "好多鱼", num: "1,770", flag: false },
      ],
    },
    {
      city: "山东",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "9,567", flag: true },
        { name: "娃哈哈", num: "2,345", flag: false },
        { name: "喜之郎", num: "9,037", flag: false },
        { name: "八喜", num: "1,080", flag: true },
        { name: "小洋人", num: "4,724", flag: false },
        { name: "好多鱼", num: "9,999", flag: true },
      ],
    },
  ];
  var li = "";
  $.each(hotData, function (index, item) {
    li += `
    <li>
      <span>${item.city}</span>
      <span>${item.sales} <s class=${
      item.flag ? "icon-up" : "icon-down"
    }></s></span>
    </li>
    `;
  });
  $(".sup").html(li);
  //  鼠标经过事件
  $(".province .sup").on("mouseenter", "li", function () {
    index = $(this).index(); //鼠标经过li事件 这个li的索引号 赋值给index
    render($(this));
  });

  // 默认让第一个li显示出来
  $(".province .sup li").eq(0).trigger("mouseenter");
  // 定时器  tab自动切换
  var $li = $(".province .sup li");
  var index = 0;
  var timer = setInterval(function () {
    index++;
    if (index >= $li.length) index = 0;
    // $li.eq(index).trigger("mouseenter");
    render($li.eq(index));
  }, 1000);
  $(".province .sup").hover(
    function () {
      clearInterval(timer);
    },
    function () {
      clearInterval(timer);
      timer = setInterval(function () {
        index++;
        if (index >= $li.length) index = 0;
        render($li.eq(index));
      }, 1000);
      // timer = setInterval(function () {
      //   $li.eq(index).trigger("mouseenter");
      //   index++;
      //   if (index >= 5) index = 0;
      // }, 1000);
    }
  );
  // 封装一个函数 处理(鼠标经过\离开时定时器无法启动的BUG)
  function render(obj) {
    obj.addClass("active").siblings().removeClass("active");
    var li = "";
    $.each(hotData[obj.index()].brands, function (i, item) {
      li += `
      <li>
      <span>${item.name}</span>
      <span> ${item.num}
      <s class=${item.flag ? "icon-up" : "icon-down"}></s>
      </span>
      </li>
     `;
    });
    $(".sub").html(li);
  }
})();
